<template>
  <div>
    <!-- 第一步  先获取权限列表 发请求 到request -->
    <h1 style="text-align: center">权限列表</h1>
    <!-- 点击跳转到权限新增页面 -->
    <el-button type="primary" @click="$router.push('/auth/add')"
      >新增权限</el-button
    >
    <el-table
      :data="authList"
      style="width: 100%; margin-bottom: 20px"
      row-key="_id"
      border
    >
      <el-table-column prop="name" label="权限名称" width="180">
      </el-table-column>
      <el-table-column prop="icon" label="图标" width="180"> 
      </el-table-column>
      <el-table-column prop="isShow" label="是否展示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            @change="change(scope.$index, scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isShow" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" 
           v-permission="{path: '/auth/edit', name: '权限编辑'}"
           @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-permission="{path: '/auth/del', name: '权限删除'}"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 权限删除  默认情况下隐藏状态   点击编辑显示 -->
      <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
      >
        <span>真的要残忍的将我删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
            <!-- 点击确定发送请求删除数据   数据库数据也删除  发请求 -->
          <el-button type="primary" @click="del">确 定</el-button>
        </span>
      </el-dialog>

    <!-- 编辑用 对话框做   默认情况下隐藏状态   点击编辑显示-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="权限名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限路径 ">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="权限图标">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch
            v-model="form.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="父权限">
          <el-select v-model="form.parentId" placeholder="请选择活动区域">
            <!-- 没有权限 默认显示 无父权限 -->
            <el-option label="无父权限" value="0"></el-option>
            <!-- 遍历权限 -->
            <el-option
              v-for="auth in authList"
              :key="auth._id"
              :label="auth.name"
              :value="auth._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//导入请求回来的所有权限   权限修改  权限删除 权限展示状态修改
import { AuthList, AuthEdit, AuthDel, AuthStatus} from "@/request";
//导入按钮自定义指令权限  函数
import permission from '@/utils/permission'

export default {
    //使用自定义指令 值是一个对象  键是自定义指令的名字
  directives: {
      //也应该是一个对象  当只有bind和updated 可以简写 第一次绑定和修改时会使用的数据  经常情况下这两个函数是一样的可以简写成一个函数
      //需要有参数  el binding  键和值相等可以简写
      permission
      
  },
  data() {
    return {
      authList: [],
      // 编辑显示状态  默认情况下隐藏
      dialogVisible: false,
       // 删除显示状态  默认情况下隐藏
      dialogVisible1: false,
      form: {
        name: "",
        icon: "",
        path: "",
        parentId: "0",
        isShow: false,
      },
    };
  },
  methods: {
    // 权限展示状态修改
       async change(index,row) {
            let data = await AuthStatus(row._id)
            let { error_code,msg } = data
            if(error_code === 200){
                this.$message({
                    message: msg,
                    type: 'success',              
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                });
            }
        },
    // 删除点击取消 对话框隐藏
    quxiao(){
         this.dialogVisible1 = false
    },
    //点击删除发请求对数据(权限)做删除
   async del() {
       console.log(this.form);
      //调用把data传递过来  data就是form  row里id此时的form中没有
      let data = await AuthDel(this.form);
      // console.log(data);
      //权限修改成功或者失败  提示用户
      // 先解构
      let { error_code, msg } = data;
      // 修改成功  提示用户 不用跳转 让显示变隐藏
      if (error_code === 200) {
        this.$message({
          type: "success",
          message: msg,
          duration: 1500,
          onClose: () => {
            //不用跳转 让显示变隐藏  并把数据清空 不要影响新增
            this.dialogVisible1 = false
            //   (this.form = {
            //     form: {
            //       name: "",
            //       icon: "",
            //       path: "",
            //       parentId: "0",
            //       isShow: false,
            //     },
            //  });
            // 删除成功重新渲染页面
             this.getAuthList();
           },
        });
      } else {
        //修改失败
        this.$message({
          type: "error",
          message: msg,
          duration: 1500,
        });
      }
    },
  
    //点击创建发请求对数据(权限)做修改
    async onSubmit() {
      console.log(this.form);
      //调用把data传递过来  data就是form  row里id此时的form中没有
      let data = await AuthEdit(this.form);
      // console.log(data);
      //权限修改成功或者失败  提示用户
      // 先解构
      let { error_code, msg } = data;
      // 修改成功  提示用户 不用跳转 让显示变隐藏
      if (error_code === 200) {
        this.$message({
          type: "success",
          message: msg,
          duration: 1500,
          onClose: () => {
            //不用跳转 让显示变隐藏  并把数据清空 不要影响新增
            (this.dialogVisible = false),
              (this.form = {
                form: {
                  name: "",
                  icon: "",
                  path: "",
                  parentId: "0",
                  isShow: false,
                },
             });
           },
        });
      } else {
        //修改失败
        this.$message({
          type: "error",
          message: msg,
          duration: 1500,
        });
      }
    },
    // 权限编辑  用对话框做 不做单独页面
    handleEdit(index, row) {
      // console.log(index, row);
      // 点编辑 变为 true
      this.dialogVisible = true;
      //默认情况下点开显示数据  row已经传过来当前的数据了  把数据给form
      this.form = row;
    },

    // 删除数据
    handleDelete(index, row) {
      // console.log(index, row);

      this.dialogVisible1 = true;
      //默认情况下点开显示数据  row已经传过来当前的数据了  把数据给form
      this.form = row;
    },
    async getAuthList() {
      //用请求回来的数据 在created调用
      let data = await AuthList();
      //  console.log(data);
      //  数据获取成功 赋值给 authList  有数据可以渲染了
      this.authList = data.data.authlist;
    },
  },
  created() {
    //在这里调用 --
    this.getAuthList();
  },
};
</script>

<style>
</style>
